<template>
  <div class="tag-icon" :style="curStyle">
    <slot>
      <img :src="imgSrc" alt="" />
    </slot>
  </div>
</template>

<script>
const imgs = {
  tagSys: require('@/assets/img/monitor/tagSys.png'),
  tagPack: require('@/assets/img/monitor/tagPack.png'),
  tagEnum: require('@/assets/img/monitor/tagEnum.png'),
  tagAlbum: require('@/assets/img/monitor/tagAlbum.png'),
  tagSearch: require('@/assets/img/monitor/tagSearch.png'),
  tagCheck: require('@/assets/img/monitor/tagCheck.png'),
  tagTransfer: require('@/assets/img/monitor/tagTransfer.png'),
  tagPlatform: require('@/assets/img/monitor/tagPlatform.png'),
  tagTable: require('@/assets/img/monitor/tagTable.png'),
  tagField: require('@/assets/img/monitor/tagField.png'),
  bezel: require('@/assets/img/monitor/bezel.png')
}
export default {
  name: 'TagIcon',
  props: {
    img: String
  },
  computed: {
    imgSrc() {
      if (!this.img) return
      return imgs[this.img]
    },
    curStyle() {
      let obj = {}
      if (!this.img) {
        obj.backgroundImage = imgs['bezel']
        obj.backgroundRepeat = 'no-repeat'
        obj.backgroundSize = '100%'
      }
      return obj
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.tag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3vw;
  height: 3vw;
  /*  background: url(~@/assets/img/monitor/bezel.png) 100% no-repeat; */
  > img {
    width: 100%;
  }
}
</style>
